import { Popup } from 'devextreme-react';
import React, { useImperativeHandle, useRef, useState } from 'react';
import { intl } from '../../../utils';

const PopupComponents = React.forwardRef((props: any, ref: any) => {
    const [visible, setVisible] = useState<boolean>(false);
    const popupRef = useRef<any>(null);
    const diaParams = useRef<any>();

    // 自定义方法
    useImperativeHandle(ref, () => ({
        show: (params: any) => {
            diaParams.current = params;
            setVisible(true);
        },
        closeDia: () => {
            setVisible(false);
        }

    }));

    const onOk = () => {
        if (diaParams.current?.okCallback) {
            diaParams.current?.okCallback()
        }
        setVisible(false);
    }

    const onCancel = () => {
        setVisible(false)
        if (diaParams.current?.cancelCallback) {
            diaParams.current?.cancelCallback()
        }

    }

    return (
        <>
            <Popup
                ref={popupRef}
                visible={visible}
                title={diaParams.current?.title}
                {...props}
                width={500}
                height={200}
                // dragOutsideBoundary={true}
                resizeEnabled={true}
                onHiding={() => onCancel()}
                toolbarItems={[

                    {
                        widget: 'dxButton',
                        toolbar: 'bottom',
                        location: 'after',
                        options: {
                            text: diaParams.current?.cancelText || intl('pub.cancel', '否'),
                            onClick: () => onCancel()
                        },
                    },
                    {
                        widget: 'dxButton',
                        toolbar: 'bottom',
                        location: 'after',
                        options: {
                            text: diaParams.current?.okText || intl('pub.ok', '是'),
                            type: 'default',
                            onClick: () => onOk()
                        },
                    },

                ]}
                contentRender={() => (
                    <div>
                        {
                            diaParams.current?.content
                        }
                    </div>
                )}
            />
        </>
    );
});

export default PopupComponents;
